<template>
  <div class="leftCenter">
    <div class="top">省级数据排行</div>
    <div class="box" v-for="(item, index) in list" :key="index" ref="box">
      <div class="box_top">
        <p><i class="el-icon-user"></i>{{ item.name }}</p>
        <p>{{ item.value }}</p>
      </div>
      <div class="line">
        <p class="line_xian" :style="`width:${item.line}`"></p>
      </div>
    </div>
  </div>
</template>
<script>
// import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "leftCenter",
  components: {
    // vueSeamlessScroll
  },
  data() {
    return {
      option: {
        step: 0.2
      },
      list: [
        {
          name: "山东",
          value: "213123",
          line: "80%"
        },
        {
          name: "山东1",
          value: "213123",
          line: "10%"
        },
        {
          name: "山东2",
          value: "213123",
          line: "20%"
        },
        {
          name: "山东3",
          value: "213123",
          line: "30%"
        },
        {
          name: "山东4",
          value: "213123",
          line: "40%"
        },
        {
          name: "山东5",
          value: "213123",
          line: "50%"
        }
      ]
    };
  },
  methods: {}
};
</script>
<style scoped>
div,
h1,
h2,
h3,
p,
img {
  padding: 0;
  margin: 0;
}
.leftCenter {
  width: 500px;
  height: 360px;
  margin-top: 10px;
  background: url("../assets/let_mid.png") no-repeat;
  background-size: 100% 100%;
  padding: 0 20px;
}
.top {
  height: 40px;
  color: #58aff8;
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
}
.seamless-warp {
  height: 315px;
  overflow: hidden;
}
.box {
  width: 100%;
  height: 38px;
  margin-top: 10px;
}
.box_top {
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  height: 25px;
  line-height: 25px;
}
.line {
  width: 100%;
  height: 10px;
  border-radius: 2px;
  background: #3e3f47;
}
.line_xian {
  width: 158px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(to right, #0053fe, #00ffe3);
}
</style>